﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>无标题页</title>
    <link href="Style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <select id="sl1">
        <option value="1">死亡骑士</option>
        <option value="2">圣骑士</option>
        <option value="3">先知</option>
        <option value="4">祈求者</option>
        <option value="5">流浪剑客</option>
        <option value="6">酒仙熊猫</option>
        <option value="7">死灵法师</option>
        <option value="8">秀逗魔导士</option>
        <option value="9">地精工程师</option>
        <option value="10">发条地精</option>
        <option value="11">潮汐猎人</option>
        <option value="12">剑圣</option>
        <option value="13">胖子</option>
        <option value="14">风行者</option>
        <option value="15">受折磨的灵魂受折磨的灵魂</option>
    </select>
    <select id="sl2">
        <option value="1">死亡骑士22</option>
        <option value="2">酒仙熊猫</option>
        <option value="3">死灵法师</option>
        <option value="4">秀逗魔导士</option>
        <option value="5" selected="selected">地精工程师</option>
        <option value="6">发条地精</option>
        <option value="7">潮汐猎人</option>
        <option value="7">剑圣</option>
        <option value="8">胖子</option>
        <option value="9">风行者</option>
    </select>
    
    <br/><br/>
    <!--<select multiple="multiple">
        <option value="1">China</option>
        <option value="2">Japan</option>
        <option value="3">America</option>
    </select>-->
    <br/><br/><br/><br/><br/>
    <p><br/>
    <input type="button" id="btnA" value="美化" /><input type="button" id="btnB" value="还原" />
    <input type="button" id="btnC" value="设置下拉框选中value12(剑圣)" />
    </p>
</body>

<script src="../jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script src="TzSelect.js" type="text/javascript"></script>

<script type="text/javascript">
    $(function() {

        $("#sl1").change(function() {
            $("#sl2").val($("#sl1").val()); //.TzSelect();
        });



        $("#btnA").click(function() {
            //$("select").TzSelect({ "listHeight": 0, "fontSize": 12, "isBold": false, "border": 2, "overflow": "auto", "isSlide": true });
            $("#sl1").TzSelect();
        });


        $("#btnB").click(function() {
            $("select").UnTzSelect();
            //$("select").parent().parent().remove();

        });

        $("#btnC").click(function() {
            //$("#sl1").val(12).change();
            //调用自定义事件
            //$("#sl1").trigger("SetValue", 12);
            //$("#sl1").SetTzSelect(12);
            //$("#sl1").append("<option value='123222'>123</option>").TzSelect();
            $("#sl1").TzSelect.haha("123");
        });
    });
    
</script>

</html>
